<template>
    <view class="page__bd">
        <view class="hb-bar bg-white">
            <view class="action"><text class="hb-icon_title text-blue"></text>全屏限高轮播图</view>
        </view>
        <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
            :autoplay="true" interval="5000" duration="500">
            <swiper-item v-for="(item,index) in swiperList" :key="index">
                <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
                <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
                    v-if="item.type=='video'"></video>
            </swiper-item>
        </swiper>

        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-pink"></text> 卡片式轮播
            </view>
        </view>
        <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
            :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
            indicator-active-color="#0081ff">
            <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
                <view class="swiper-item">
                    <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
                    <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
                        v-if="item.type=='video'"></video>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    let classCatch = ['next', 'current', 'next', 'next'];
    let flag = 0;

    let touch = [0, 0];
    export default {
        data() {
            return {
                cardCur: 0,
                dotStyle: false,
                towerStart: 0,
                direction: '',
                swiperList: [{
                        id: 0,
                        type: "image",
                        url: "https://up.enterdesk.com/edpic/e3/ad/df/e3addfb0ce8989856aeb1b89493942ab.jpg"
                    },
                    {
                        id: 1,
                        type: "image",
                        url: "https://up.enterdesk.com/edpic/8d/8e/db/8d8edbba205205d5d517607a8ba72697.jpg"
                    },
                    {
                        id: 2,
                        type: "image",
                        url: "https://up.enterdesk.com/edpic/1f/9f/28/1f9f28b38ccda4c50804bb6ff2ea7304.jpg"
                    },
                    {
                        id: 3,
                        type: "image",
                        url: "http://imgsrc.baidu.com/forum/w%3D580/sign=517726b2c2bf6c81f7372ce08c3cb1d7/255f054e251f95ca1c3d506cc7177f3e650952f2.jpg"
                    },
                    {
                        id: 4,
                        type: "image",
                        url: "http://imgsrc.baidu.com/forum/w%3D580/sign=851f31d77ecf3bc7e800cde4e101babd/71a8c9039245d68836297f7eaac27d1ed31b2493.jpg"
                    }
                ],
                slide: [{
                    id: 1,
                    title: "坐位体前屈",
                    score: "3.0厘米",
                    grade: "达标",
                }, {
                    id: 2,
                    title: "肺活量",
                    score: "2562毫升",
                    grade: "优秀",
                }, {
                    id: 3,
                    title: "立定跳远",
                    score: "173厘米",
                    grade: "良好",
                }, {
                    id: 4,
                    title: "跳绳",
                    score: "140次",
                    grade: "优秀",
                }],

                testClass: classCatch,
                testCurrentNav: 0,
            }
        },
        methods: {
            // cardSwiper
            cardSwiper(e) {
                this.cardCur = e.detail.current
            }
        }
    }
</script>

<style lang="less">
  
</style>
